<template>
  <a-form
    :model="formState"
    ref="formDataRef"
    name="basic"
    :label-col="{ style: 'width:70px' }"
    :wrapper-col="{ style: 'calc(100% - 70px)' }"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <a-form-item label="部门" name="deptId" :rules="[{ required: true, message: '请选择部门!' }]">
      <!-- <a-cascader
        v-model:value="formState.deptId"
        change-on-select
        :options="departmentOpts"
        multiple
        :fieldNames="{ label: 'name', value: 'id', children: 'childList' }"
        :show-search="{ filter }"
        placeholder="请选择"
      /> -->
      <a-tree-select
        v-model:value="formState.deptId"
        style="width: 100%"
        :tree-data="departmentOpts"
        tree-checkable
        allow-clear
        :max-tag-count="1"
        :treeCheckStrictly="true"
        :show-checked-strategy="SHOW_PARENT"
        placeholder="请选择"
        :fieldNames="{ label: 'name', value: 'id', children: 'childList' }"
        tree-node-filter-prop="name"
      />
    </a-form-item>
    <a-form-item :wrapper-col="{ offset: 8, span: 16 }" class="submit-btn-form-item">
      <a-button type="primary" html-type="submit">确定</a-button>
      <a-button @click="resetHandle">取消</a-button>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { TreeSelect } from "ant-design-vue";
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: Array<DepartmentPersonnel.ListRows>;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", visible: boolean): void;
  (e: "submit"): void;
}>();
const { visible, passData } = toRefs(props);
const { formDataRef, formState, departmentOpts, getDeptTree } = InitHook();
const { onFinish, onFinishFailed, resetHandle, resetFields } = OperationHook({ formDataRef, formState, emit, passData });
const init = () => {
  getDeptTree();
};
watch(
  () => visible.value,
  (v: boolean) => {
    if (!v) {
      resetFields();
      formDataRef.value.clearValidate();
    } else {
      init();
    }
  }
);
init();
</script>
<style lang="stylus" scoped></style>
